<template>
  <div>
    <el-popover
      placement="right"
      v-model="visiblePrompts"
      trigger="click"
    >
      <div>
        <div>
          <el-input v-model="search" placeholder="请输入关键字搜索" size="mini" clearable></el-input>
        </div>
        <el-table :data="searchedValue" :height="300" @row-click="handleChange" ref="table"
                  @selection-change="handleSelectionChange"
        >
          <el-table-column width="50" type="selection"></el-table-column>
          <el-table-column width="80" property="label" label="类目"></el-table-column>
          <el-table-column width="300" property="value" label="尺码"></el-table-column>
        </el-table>
        <div class="flex text-center" style="padding-top: 20px">
          <el-button type="primary" @click="handleSure" size="mini">确定</el-button>
        </div>
      </div>

      <i class="el-icon-connection" slot="reference"></i>
    </el-popover>
  </div>
</template>

<script>
export default {
  name: 'MyTool',
  props: {
    value: {
      type: String,
      default: ''
    },
    options: {
      type: [Array, Object, Function, Promise],
      default() {
        return []
      }
    }
  },
  watch: {
    async options() {
      this.selectOptions = await this.getOptions()
    }
  },
  async created() {
    this.selectOptions = await this.getOptions()
  },
  computed: {
    searchedValue() {
      if (!this.search.trim()) {
        return this.selectOptions
      }
      const searchParts = this.search.trim().split(/[\/,，；;\s]/ig).map(el => el.trim()).filter(el => el)
      // 过滤搜索，不区分大小写
      return this.selectOptions.filter(el => searchParts.some(part => el.label.toLowerCase().includes(part.toLowerCase()) || el.value.toLowerCase().includes(part.toLowerCase())))
      // return this.selectOptions.filter(el => el.label.toLowerCase().includes(this.search.toLowerCase()) || el.value.toLowerCase().includes(this.search.toLowerCase()))
    }
  },
  data() {
    return {
      visiblePrompts: false,
      selectOptions: [],
      search: '',
      multipleSelection: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      // console.log(val)
      this.multipleSelection = val
    },
    async getOptions() {
      if (Array.isArray(this.options)) {
        return this.options
      }
      if (this.options instanceof Promise) {
        return await this.options
      }
      return this.options.getOptions()
    },
    handleChange(row) {
      this.$refs.table.toggleRowSelection(row)
      // this.visiblePrompts = false
      // this.$emit('change', { value: row.value, option: this.selectOptions.find(el => el.value === row.value) })
      // this.$emit('input', row.value)
    },
    handleSure() {
      if (this.multipleSelection && this.multipleSelection.length) {
        if (this.value) {
          this.$emit('input', this.multipleSelection.map(el => '<span style="color:red">' + el.label + '</span>:' + el.value).join('<br/>'))
          // this.$emit('input', this.value + '\n' + this.multipleSelection.map(el => el.label + ':' + el.value).join('\n'))
        }
      }
      this.$refs.table.clearSelection()
      this.visiblePrompts = false
    }
  }
}
</script>

<style scoped>

</style>
